<template>
  <div class="change_form_wrapper">
    <div class="change_form_wrapper_cell">
      <h3>修改密码</h3>
      <el-form :model="changeForm" :rules="rules" ref="changeForm" label-width="68px">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="changeForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="changeForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rpassword">
          <el-input type="password" v-model="changeForm.rpassword" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="goBack" >返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped>
  .change_form_wrapper {
    width: 100%;
    height: 100%;
    display:table;
    background-color: #000000;
  }
  .change_form_wrapper_cell {
    display:table-cell;
    text-align: center;
    vertical-align:middle;
    color: white;
  }
  .change_form_wrapper form {
    display: inline-block;
    width: 500px;
    margin: auto;
    background-color: #dddddd;
    border-radius: 5px;
    padding: 50px;
    margin-bottom: 200px;
  }
</style>
<script>
  export default {
    data () {
      var validatesUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
      var validateRPassword = (rule, value, callback) => {
        if (this.changeForm.password && value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.changeForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        changeForm: {
          username: '',
          password: '',
          rpassword: ''
        },
        rules: {
          username: [
            { validator: validatesUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          rpassword: [
            { validator: validateRPassword, equalTo: '#password', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      goBack () {
        this.$router.back()
      },
      handleReset () {
        this.$refs.changeForm.resetFields()
      },
      handleSubmit (ev) {
        this.$refs.changeForm.validate((valid) => {
          if (valid) {
            this.checkAccount()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      checkAccount () {
        // TODO:查询服务器
        let vm = this

        vm.Interfacechange(vm.changeForm.username, vm.changeForm.password, function (administrator, token) {
          console.log(administrator, token)
          vm.$store.commit('LOGIN_SUCCESS', {
            administrator,
            token
          })
          vm.$router.push('/workbench/dashboard')
        })
      },
      // 修改密码接口
      Interfacechange (username, password, callback) {
        switch (this.$store.state.config.ApiAdapter) {
          case 'apigility':
            return this.Interfacechange_Apigility(username, password, callback)
        }
      },
      // 修改密码的实现之一
      Interfacechange_Apigility (username, password, callback) {
        let vm = this

        this.$http.get('admin/administrator', {
          params: {
            name: username
          }
        }).then((response) => {
          response.json().then(function (data) {
            if (response.ok && data.total_items > 0) {
              let administrator = data._embedded.administrator[0]
              vm.$http.patch('user/identity/' + data._embedded.administrator[0].user.id, {
                password: password
              }, {
                headers: {
                  Authorization: vm.$store.state.login.authorization
                }
              }).then((response) => {
                callback(administrator, response.body)
              }, (response) => {
                window.alert('用户名或密码不正确！')
              })
            } else {
              window.alert('管理员帐号不存在')
            }
          })
        })
      }
    },
    created () {
      if (!this.$store.state.login.status) {
        this.$router.push('/login')
      }
    }
  }
</script>
